<template>
  <div>
    <van-nav-bar title="商品详情" left-arrow :fixed="true" :placeholder="true" @click="GotoPaht(path)"/>
    <!-- ↑↑↑↑↑↑↑↑↑↑↑↑↑头部↑↑↑↑↑↑↑↑↑↑↑↑↑↑   -->

    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" style="height:240px">
      <van-swipe-item v-for="i in image" >{{i}}</van-swipe-item>
    </van-swipe>
    <!--  轮播图结束     -->

    <van-swipe>
      <van-row >
        <div style="weight:100%">
          <p class="price">$21111</p>
          <p class="collection">
            <van-icon v-show="!isCollection" @click="onClickLike()" name = "like-o" color="red" size="30px" />
            <van-icon v-show="isCollection" @click="onClickLike()" name = "like" color="red" size="30px" />
          </p>
        </div>
      </van-row>
    </van-swipe>




    <!-- ↓↓↓↓↓↓↓↓↓↓↓↓↓底部↓↓↓↓↓↓↓↓↓↓↓↓↓↓   -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIcon" />
      <van-goods-action-icon icon="shop-o" text="店铺" @click="onClickIcon" />
      <van-goods-action-button
          type="danger"
          text="立即购买"
          @click="onClickButton"
      />
    </van-goods-action>
  </div>
</template>
<script>
import {Toast} from "vant";

export default {
  data(){
    return{
      path: '../',
      name:'',
      image:[1,2,3],
      isCollection:false
    }
  },
  methods: {
    onClickIcon() {
      Toast('点击图标');
    },
    onClickButton() {
      Toast('点击按钮');
    },
    onClickLike(){
      this.isCollection =!this.isCollection;
      if(this.isCollection){
        Toast("收藏成功")
      }else {
        Toast("取关了")
      }
    },
    GotoPaht(path) {
      if (path != undefined) {
        this.push([path])
      }
    }
  }

}
</script>

<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
label{
  color: red;
  font-size: 24px;
}
.price{
  float: left;
  margin-left: 20px;
  margin-top: 20px;
}
.collection{
    float: right;
    margin-right: 20px;
    font-size: 30px;
}
label{
  color: red;
  font-size: 24px;
}
.van-col{
  weight:100px
}



</style>